<template>
	<view class="page" :style="'background-image: url('+indexBg+');'">
    <u-navbar :fixed="false" leftIcon=" " :autoBack="false" title="员工关系" placeholder bgColor="transparent"></u-navbar>
    <view class="icon-box">
      <view class="icon-list">
        <view class="icon-item">
          <image src="https://gowork365.com/prod-api/profile/mini/company/icon4.png" mode="widthFix" @click="jumpTo('/other/staff/staffList')" />
          <view class="text">员工管理</view>
        </view>
        <view class="icon-item">
          <image src="https://gowork365.com/prod-api/profile/mini/company/icon5.png" mode="widthFix" @click="jumpTo('/other/gwnotice/gwnoticeList')" />
          <view class="text">通知公告</view>
        </view>
        <view class="icon-item">
          <image src="https://gowork365.com/prod-api/profile/mini/company/icon6.png" mode="widthFix" @click="isRemainingNum" />
          <view class="text">发起签署</view>
        </view>
        <view class="icon-item">
          <image src="https://gowork365.com/prod-api/profile/mini/company/icon3.png" mode="widthFix" @click="jumpTo('/other/staff/staffSelect')" />
          <view class="text">上传历史合同</view>
        </view>
      </view>
    </view>
    <view v-if="statusName=='进行中'" class="tabs" :style="'background-image: url('+tabs1+');'">
      <view class="tabs-item active">进程中合同</view>
      <view class="tabs-item" @click="statusName='已签署'">已签署合同</view>
    </view>
    <view v-if="statusName=='已签署'" class="tabs" :style="'background-image: url('+tabs2+');'">
      <view class="tabs-item" @click="statusName='进行中'">进程中合同</view>
      <view class="tabs-item active">已签署合同</view>
    </view>
    <view class="list" v-if="statusName=='进行中'">
      <view class="list-item" v-for="item in contractList" :key="item.id">
        <view class="item">
          <view class="info">
            <image src="https://gowork365.com/prod-api/profile/mini/company/list1.png" />
            <view>
              <view class="title u-line-2">{{ item.contractName }}</view>
              <view class="time">{{ item.createTime }}</view>
            </view>
          </view>
          <view class="actions">
            <view class="actions-item" style="background: #FFDFE5;color: #FE748B;" @click="handleRevoke(item)">
              <image src="https://gowork365.com/prod-api/profile/mini/company/action1.png" />
              <text>撤销</text>
            </view>
            <view class="actions-item" style="background: #E9F8F6;color: #138E88;" @click="handleForm(item)">
              <image src="https://gowork365.com/prod-api/profile/mini/company/action2.png" />
              <text>查看</text>
            </view>
            <!-- <view class="actions-item" style="background: #E9F8F6;color: #138E88;" v-if="item.izHistory == '是'" @click="handleDown(item)">
              <image src="https://gowork365.com/prod-api/profile/mini/company/action3.png" />
              <text>下载PDF合同</text>
            </view> -->
          </view>
        </view>
        <view class="tips" v-if="item.unSignUser && item.unSignUser != 'null'">
          <image src="https://gowork365.com/prod-api/profile/mini/company/action4.png" />
          <text>待{{ item.unSignUser }}签署</text>
        </view>
      </view>
    </view>
    <view class="list" v-if="statusName=='已签署'">
      <view class="list-item" v-for="item in contractList" :key="item.id">
        <view class="item">
          <view class="info">
            <image src="https://gowork365.com/prod-api/profile/mini/company/list2.png" />
            <view>
              <view class="title u-line-2">{{ item.contractName }}</view>
              <view class="time">{{ item.updateTime }}</view>
            </view>
          </view>
          <view class="actions">
            <view class="actions-item" style="background: #E9F8F6;color: #138E88;" @click="handleForm(item)">
              <image src="https://gowork365.com/prod-api/profile/mini/company/action2.png" />
              <text>查看</text>
            </view>
            <!-- <view class="actions-item" style="background: #E9F8F6;color: #138E88;" v-if="item.izHistory == '是'" @click="handleDown(item)">
              <image src="https://gowork365.com/prod-api/profile/mini/company/action3.png" />
              <text>下载PDF合同</text>
            </view> -->
          </view>
        </view>
      </view>
    </view>
    <view v-if="contractList.length == 0" class="a-empty" style="margin-top: -62rpx;"><a-empty></a-empty></view>
    <customTabbar value="3" />
	</view>
</template>

<script>
import customTabbar from '../../components/customTabbar.vue'
import { listContract, contractRevoke, getSignUrl } from '@/api/index'
import { downloadFile } from '@/common/util'

export default {
  components: {
    customTabbar,
  },
  data() {
    return {
      indexBg: 'https://gowork365.com/prod-api/profile/mini/index/indexBg1.png',
      tabs1: 'https://gowork365.com/prod-api/profile/mini/company/tabs1.png',
      tabs2: 'https://gowork365.com/prod-api/profile/mini/company/tabs1.png',
      statusName: '已签署',
      total: 0,
      page: {
        pageNum: 1,
        pageSize: 50,
      },
      contractList: [],
    }
  },
  watch: {
    statusName() {
      this.page.pageNum = 1
      this.contractList = []
      this.getList()
    },
  },
  onShow() {
    if(uni.getStorageSync('statusName')) {
      this.statusName = uni.getStorageSync('statusName')
      uni.removeStorageSync('statusName')
    }
    this.page.pageNum = 1
    this.contractList = []
    this.getList()
  },
  methods: {
    /** 撤销按钮操作 */
    handleRevoke(row) {
      const id = row.id;
      const that = this
      uni.showModal({
        title: '是否确认撤销此合同？',
        editable: true,
        placeholderText: '请输入撤销原因',
        success: async function (res) {
          if (res.confirm) {
            if(res.content == '') {
              uni.showToast({
                icon: 'none',
                title: '请输入撤销原因',
              })
            } else {
              uni.showLoading({ mask: true })
              await contractRevoke({id: id, cancelMessage: res.content})
              uni.hideLoading()
              that.getList()
            }
          }
        }
      });
    },
    handleForm(row) {
      if(row.izHistory == '是') {
        const url = this.baseUrl + row.contractUrl
        downloadFile(url, true)
      } else {
        getSignUrl(row).then(response => {
          const previewUrl = response.data.url
          wx.navigateToMiniProgram({
            appId: this.baseAppId,
            path: previewUrl, // 跳转的页面路径，可选，默认跳转到目标小程序首页; 签署时，需使用后台API返回的完整链接（类似pages/guide?id=xxx&foo=bar）
            envVersion: 'release', // 跳转正式或demo小程序，都需要传 'release'
            success(res) {
            },
            fail(err) {
              // 跳转失败的回调函数
              console.log(err);
              uni.showToast({
                icon: 'none',
                title: '跳转三方小程序失败',
              })
            }
          })
        })
      }
    },
    handleDown(row) {
      if(row.izHistory == '是') {
        const url = this.baseUrl + row.contractUrl
        downloadFile(url)
      } else {
        getSignUrl(row).then(response => {
          const previewUrl = response.data.url
          wx.navigateToMiniProgram({
            appId: this.baseAppId,
            path: previewUrl, // 跳转的页面路径，可选，默认跳转到目标小程序首页; 签署时，需使用后台API返回的完整链接（类似pages/guide?id=xxx&foo=bar）
            envVersion: 'release', // 跳转正式或demo小程序，都需要传 'release'
            success(res) {
            },
            fail(err) {
              // 跳转失败的回调函数
              console.log(err);
              uni.showToast({
                icon: 'none',
                title: '跳转三方小程序失败',
              })
            }
          })
        })
      }
    },
    getList() {
      uni.showLoading({ mask: true })
      listContract({...this.page, statusName: this.statusName, contractType: '员工关系'}).then(response => {
        uni.hideLoading()
        this.contractList = [...this.contractList, ...response.rows]
        this.total = response.total;
      });
    },
    isRemainingNum() {
      const that = this
      const enterpriseInfo = uni.getStorageSync('enterpriseInfo')
      if(!enterpriseInfo.id) {
        uni.showToast({
          icon: 'none',
          title: '请使用企业账号!',
        })
        return
      }
      if(enterpriseInfo.contractAllNum - enterpriseInfo.contractUseNum <= 0) {
        uni.showModal({
          title: '提示',
          content: '剩余合同份数余额不足，是否立即充值？',
          success: function (res) {
            if (res.confirm) {
              that.jumpTo('/pages/enterpriseInfo/platfromEquity')
            }
          }
        });
      } else {
        this.jumpTo('/other/staff/sign')
      }
    },
  },
  onReachBottom() {
    if(this.page.pageNum * this.page.pageSize < this.total) {
      this.page.pageNum++
      this.getList()
    }
  },
}
</script>

<style lang="scss" scoped>
.page{
	width: 750rpx;
	min-height: 100vh;
  background: #F4F7F6;
  position: relative;
  background-repeat: no-repeat;
  background-size: 750rpx 348rpx;
  padding-bottom: 40rpx;
  .icon-box {
    margin: 48rpx auto 20rpx;
    width: 686rpx;
    background: #FFFFFF;
    box-shadow: 0rpx 8rpx 20rpx 0rpx rgba(11,102,97,0.2);
    border-radius: 16rpx;
    padding: 32rpx;
    .icon-list {
      display: flex;
      justify-content: space-around;
      .icon-item {
        display: flex;
        flex-direction: column;
        align-items: center;
        image {
          display: block;
          width: 96rpx;
          height: auto;
          margin-bottom: 20rpx;
        }
        .text {
          font-family: PingFangSC, PingFang SC;
          font-size: 24rpx;
          color: rgba(0,0,0,0.85);
        }
      }
    }
  }
  .tabs {
    width: 726rpx;
    height: 164rpx;
    background-repeat: no-repeat;
    background-size: 726rpx 164rpx;
    margin: 0 auto;
    display: flex;
    .tabs-item {
      padding: 40rpx 0;
      width: 50%;
      height: 100%;
      text-align: center;
      font-size: 24rpx;
      color: rgba(0,0,0,0.5);
    }
    .active {
      color: rgba(0,0,0,1);
    }
  }
  .list {
    width: 686rpx;
    margin: -62rpx auto 0;
    .list-item {
      margin-bottom: 32rpx;
      .item {
        width: 686rpx;
        background: #FFFFFF;
        box-shadow: 0rpx 8rpx 20rpx 0rpx rgba(11,102,97,0.2);
        border-radius: 16rpx;
        padding: 48rpx 32rpx 40rpx;
        .info {
          height: 138rpx;
          margin-bottom: 48rpx;
          display: flex;
          gap: 24rpx;
          image {
            width: 104rpx;
            height: 104rpx;
            flex-shrink: 0;
          }
          .title {
            font-size: 28rpx;
            color: rgba(0,0,0,0.85);
            margin-bottom: 16rpx;
          }
          .time {
            font-size: 24rpx;
            color: rgba(0,0,0,0.25);
          }
        }
        .actions {
          display: flex;
          gap: 24rpx;
          .actions-item {
            flex: 1;
            height: 76rpx;
            border-radius: 8rpx;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 4rpx;
            font-family: PingFangSC, PingFang SC;
            font-size: 24rpx;
            image {
              width: 32rpx;
              height: 32rpx;
            }
          }
        }
      }
      .tips {
        margin-top: 32rpx;
        width: 686rpx;
        height: 60rpx;
        background: #FFDFE5;
        border: 2rpx solid #FE748B;
        border-radius: 16rpx;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 4rpx;
        font-family: PingFangSC, PingFang SC;
        font-size: 24rpx;
        color: #FE748B;
        image {
          width: 28rpx;
          height: 28rpx;
        }
      }
    }
  }
}
</style>
